import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '../components/Layout.vue'
export const mainRoutes = [
  {
    path: '/ref',
    name: 'Ref',
    component: () => import('../views/ref.vue')
  },
   {
    path: '/toRef',
    name: 'toRef',
    component: () => import('../views/toRef.vue')
  },
  {
    path: '/toRefs',
    name: 'toRefs',
    component: () => import('../views/toRefs.vue')
  },
  {
    path: '/reactive',
    name: 'Reactive',
    component: () => import('../views/reactive.vue')
  },
  {
    path: '/computed',
    name: 'Computed',
    component: () => import('../views/computed.vue')
  },
  {
    path: '/watcher',
    name: 'watcher',
    component: () => import('../views/watchers.vue')
  },
  {
    path: '/props',
    name: 'props',
    component: () => import('../views/props/index.vue')
  },
   {
    path: '/lifecycle',
    name: 'lifecycle',
    component: () => import('../views/lifecycle.vue')
  },
  {
    path: '/jsx',
    name: 'jsx',
    component: () => import('../views/jsx/index.jsx')
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: "/",
      name: "Index",
      redirect: '/ref',
      component: Layout,
      children: [...mainRoutes]
    }
  ],
})
export default router